<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>菜单</title>
    <link rel="stylesheet" type="text/css" href="../../themes/fonts/Awesome/css/font-awesome.min.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="../../themes/fonts/Awesome/css/font-awesome-ie7.min.css"> <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">

</head>
<body>
<div id="menu">
    <ul>
        <li ui-config="id:1,icon:'home',fontIcon:{icon: 'fa-gear (alias)', color: '#000', size: 16},url:'http://www.baidu.com'">首页
        </li>
        <li ui-config="icon:'home',url:'#'">新闻
        </li>
        <li ui-config="icon:'home',url:'#',popup:true">信息系统
            <ul>
                <li ui-config="icon:'home',url:'#'">物资
                </li>
                <li ui-config="icon:'home',url:'#'">质量
                </li>
                <li ui-config="icon:'home',url:'#'">生产
                </li>
            </ul>
        </li>
        <li ui-config="icon:'home',url:'#'">公告
        </li>
    </ul>
</div>

<input type="button" class="button" id="btn" value="页面编写dom节点生成menu">
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function () {
        $('#menu').uiMenu({
            minWidth: 150,
            maxWidth: 200,
            onSelect: function (item, event) {
                if (item.url != undefined && item.url != '') {
                    alert(item.url);
                }
            }
        });
        $('#btn').click(function () {
            $('#menu').uiMenu('show', this);
        });
    })
</script>
</html>